<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SAMSUNG三星商城后台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="../x-admin/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../x-admin/css/font.css">
    <link rel="stylesheet" href="../x-admin/css/xadmin.css">


    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="../x-admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../x-admin/js/xadmin.js"></script>



</head>
<body>
    <!-- 顶部开始 -->
    <div class="container">
        <div class="logo"><a href="htindex">SAMSUNG</a></div>
        <div class="open-nav"><i class="iconfont">&#xe699;</i></div>
        <ul class="layui-nav right" lay-filter="">
            <li class="layui-nav-item">
                <a href="javascript:;">admin</a>
                <dl class="layui-nav-child"> <!-- 二级菜单 -->
                    <dd><a href="">个人信息</a></dd>
                    <dd><a href="">切换帐号</a></dd>
                    <dd><a href="login">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="index">前台首页</a></li>
        </ul>
    </div>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <div class="wrapper">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
            <div id="side-nav">
                <ul id="nav">
                    <li class="list" current>
                        <a href="htindex">
                            <i class="iconfont">&#xe761;</i>
                            欢迎页面
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                    </li>
                    <li class="list">
                        <a href="javascript:;">
                            <i class="iconfont">&#xe70b;</i>
                            商品管理
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu">
                            <li>
                                <a href="htgoodslist">
                                    <i class="iconfont">&#xe6a7;</i>
                                    商品列表
                                </a>
                            </li>
                            <li>
                                <a href="goodscategory">
                                    <i class="iconfont">&#xe6a7;</i>
                                    商品分类
                                </a>
                            </li>
                            <li>
                                <a href="goodsadd">
                                    <i class="iconfont">&#xe6a7;</i>
                                    商品添加
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="list" >
                        <a href="javascript:;">
                            <i class="iconfont">&#xe6a3;</i>
                            订单管理
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu">
                            <li>
                                <a href="htorders">
                                    <i class="iconfont">&#xe6a7;</i>
                                    订单列表
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="list" >
                        <a href="javascript:;">
                            <i class="iconfont">&#xe6a3;</i>
                            用户管理
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu" style="display:none">
                            <li>
                                <a href="htuser">
                                    <i class="iconfont">&#xe6a7;</i>
                                    用户列表
                                </a>
                            </li>
                        </ul>
                    </li>
<%--                    <li class="list" >--%>
<%--                        <a href="javascript:;">--%>
<%--                            <i class="iconfont">&#xe6a3;</i>--%>
<%--                            管理员管理--%>
<%--                            <i class="iconfont nav_right">&#xe697;</i>--%>
<%--                        </a>--%>
<%--                        <ul class="sub-menu" style="display:none">--%>
<%--                            <li>--%>
<%--                                <a href="htadmin">--%>
<%--                                    <i class="iconfont">&#xe6a7;</i>--%>
<%--                                    管理员列表--%>
<%--                                </a>--%>
<%--                            </li>--%>
<%--                        </ul>--%>
<%--                    </li>--%>
                </ul>
            </div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
          <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <form class="layui-form xbs" action="" >
                <div class="layui-form-pane" style="text-align: center;">
                  <div class="layui-form-item" style="display: inline-block;">
                    <div class="layui-input-inline">
                      <input id="goodsName" type="text" name="username"  placeholder="请输入商品名称" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width:80px">
                        <span onclick="goodsfenye()">搜索</span>
                    </div>
                  </div>
                </div> 
            </form>
            <xblock><button class="layui-btn" onclick="shuaxin()">刷新</button><span class="x-right" style="line-height:40px">共有数据：${pagers.total} 条</span></xblock>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="" value="">
                        </th>
                        <th>
                            商品ID
                        </th>
                        <th>
                            商品图片
                        </th>
                        <th>
                            商品名称
                        </th>
                        <th>
                            商品价格
                        </th>
                        <th>
                            商品类别
                        </th>
                        <th>
                            商品状态
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody>
                <c:forEach items="${pagers.data}" var = "x" >
                    <tr>
                        <td>
                            <input type="checkbox" value="1" name="">
                        </td>
                        <td>
                            ${x.sid}
                        </td>
                        <td style="text-align: center">
                            <img src="${x.url}" alt="${x.sname}" width="70px" height="70px">
                        </td>
                        <td>
                            ${x.sname}
                        </td>
                        <td >
                            ${x.sprice}
                        </td>
                        <td >
                           ${x.lname}
                        </td>
                        <td class="td-status">
                            <c:choose>
                                <c:when test="${x.isdefault == true}">
                                    <span class="layui-btn layui-btn-normal layui-btn-mini">
                                    正常销售
                                    </span>
                                </c:when>
                                <c:otherwise>
                                    <span class="layui-btn layui-btn-disabled layui-btn-mini">停售</span>
                                </c:otherwise>
                            </c:choose>
                        </td>
                        <td class="td-manage">
                            <c:choose>
                                <c:when test="${x.isdefault == true}">
                                    <a style="text-decoration:none" onclick="member_stop(this,${x.sid})" href="javascript:;" title="停售">
                                        <i class="layui-icon" style="font-size: 20px">&#xe601;</i>
                                    </a>
                                </c:when>
                                <c:otherwise>
                                    <a style="text-decoration:none" onclick="member_start(this,${x.sid})" href="javascript:;" title="上架">
                                        <i class="layui-icon">&#xe62f;</i>
                                    </a>
                                </c:otherwise>
                            </c:choose>

                            <a title="商品详情" href="javascript:;" onclick="member_edit('商品详情','goodsxq?sid=${x.sid}','4','','510')"
                            class="ml-5" style="text-decoration:none">
                                <i class="layui-icon" style="font-size: 20px">&#xe642;</i>
                            </a>
                            <a style="text-decoration:none"  onclick="member_password('商品信息修改','goodsedit?sid=${x.sid}','${x.sid}','600','400')"
                            href="javascript:;" title="修改商品">
                                <i class="layui-icon" style="font-size: 20px">&#xe631;</i>
                            </a>
                            <a title="删除" href="javascript:;" onclick="member_del(this,'1')" 
                            style="text-decoration:none">
                                <i class="layui-icon" style="font-size: 20px">&#xe640;</i>
                            </a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
              <div id="fenye">
                  <span>上一页</span>
                  <c:forEach items="${pagers.goodsPager}" var="r" varStatus="x">
                      <c:choose>
                          <c:when test="${x.index==0}">
                              <span class="active" onclick="goodsfenye(${r})">${r}</span>
                          </c:when>
                          <c:otherwise>
                              <span onclick="goodsfenye(${r})">${r}</span>
                          </c:otherwise>
                      </c:choose>
                  </c:forEach>
                  <span ${pagers.pageCount>1?"onclick='goodsfenye(2)'":""}>下一页</span>
              </div>
          </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->

    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
    <div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="item" src="../x-admin/images/a.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="../x-admin/images/b.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="../x-admin/images/c.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="../x-admin/images/d.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="../x-admin/images/e.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="../x-admin/images/f.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="../x-admin/images/g.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="../x-admin/images/h.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="../x-admin/images/i.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="../x-admin/images/j.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="../x-admin/images/k.jpg" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>   
    </div>
    <!-- 背景切换结束 -->
    <!-- 页面动态效果 -->
    <script>

        function goodsfenye(pageno){
            document.querySelector("#fenye").style.display="block";
            let inputvalue = document.querySelector("#goodsName").value;
            if (isNaN(pageno)){
                pageno=1
            }
            $.ajax({
                url:"/htgoodslist",
                type:"post",
                data:{
                    "v":"goodsFenye",
                    "pageNo":pageno,
                    inputvalue
                },
                dataType:"json",
                success:((resp)=>{
                    document.querySelector(".x-right").innerHTML="共有数据："+resp.pagers.total+"条"
                    if (resp.pagers.total==0){
                        document.querySelector("tbody").innerHTML="抱歉！，没有搜索到与“ "+inputvalue+" ”相关的字眼！";
                        document.querySelector("#fenye").style.display="none";
                    }else {
                        let html=``;
                        resp.pagers.data.forEach(x=>{
                            html+=`
                            <tr>
                        <td>
                            <input type="checkbox" value="1" name="">
                        </td>
                        <td>`
                            +x.sid+
                        `</td>
                        <td style="text-align: center">
                            <img src="`+x.url+`" alt="`+x.sname+`" width="70px" height="70px">
                        </td>
                        <td>`
                            +x.sname+
                        `</td>
                        <td >`
                            +x.sprice+
                        `</td>
                        <td >`
                           +x.lname+
                        `</td>
                        <td class="td-status">`
                                if(x.isdefault == true){
                                    html+=`<span class="layui-btn layui-btn-normal layui-btn-mini">
                                    正常销售
                                    </span>`
                                }else{
                                    html+=`<span class="layui-btn layui-btn-disabled layui-btn-mini">停售</span>`
                                }
                         html+=
                        `</td>
                        <td class="td-manage">`
                            if(x.isdefault == true){
                                html+=`<a style="text-decoration:none" onclick="member_stop(this,`+x.sid+`)" href="javascript:;" title="停售">
                                        <i class="layui-icon" style="font-size: 20px">&#xe601;</i>
                                    </a>`
                            }else{
                                html+=`<a style="text-decoration:none" onclick="member_start(this,`+x.sid+`)" href="javascript:;" title="上架">
                                        <i class="layui-icon">&#xe62f;</i>
                                    </a>`
                            }
                            html+=
                            `<a title="商品详情" href="javascript:;" onclick="member_edit('商品详情','goodsxq?sid=`+x.sid+`','4','','510')"
                            class="ml-5" style="text-decoration:none">
                                <i class="layui-icon" style="font-size: 20px">&#xe642;</i>
                            </a>
                            <a style="text-decoration:none"  onclick="member_password('商品信息修改','goodsedit?sid=`+x.sid+`','`+x.sid+`','600','400')"
                            href="javascript:;" title="修改商品">
                                <i class="layui-icon" style="font-size: 20px">&#xe631;</i>
                            </a>
                            <a title="删除" href="javascript:;" onclick="member_del(this,'1')"
                            style="text-decoration:none">
                                <i class="layui-icon" style="font-size: 20px">&#xe640;</i>
                            </a>
                        </td>
                    </tr>`
                        })
                        document.querySelector("tbody").innerHTML=html;
                        let fenye=`<span `+(resp.pagers.pageNo==1?"":"onclick='goodsfenye("+(resp.pagers.pageNo-1)+")'")+`>上一页</span>`;
                        resp.pagers.goodsPager.forEach(r=>{
                            fenye+=`<span `+(resp.pagers.pageNo==r?"class='active'":"")+`onclick="goodsfenye(`+r+`)">`+r+`</span>`
                        })
                        document.querySelector("#fenye").innerHTML=fenye+`<span `+(resp.pagers.pageNo==resp.pagers.pageCount?"":"onclick='goodsfenye("+(resp.pagers.pageNo+1)+")'")+`>下一页</span>`;
                    }
                })
            })
        }

        layui.use(['laydate'], function(){
          laydate = layui.laydate;//日期插件

          //以上模块根据需要引入
          //



          var start = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
              end.min = datas; //开始日选好后，重置结束日的最小日期
              end.start = datas //将结束日的初始值设定为开始日
            }
          };

          var end = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
              start.max = datas; //结束日选好后，重置开始日的最大日期
            }
          };

          // document.getElementById('LAY_demorange_s').onclick = function(){
          //   start.elem = this;
          //   laydate(start);
          // }
          // document.getElementById('LAY_demorange_e').onclick = function(){
          //   end.elem = this
          //   laydate(end);
          // }

        });

        //批量删除提交
         function delAll () {
            layer.confirm('确认要删除吗？',function(index){
                //捉到所有被选中的，发异步进行删除
                layer.msg('删除成功', {icon: 1});
            });
         }
         /*用户-添加*/
        function member_add(title,url,w,h){
            x_admin_show(title,url,w,h);
        }

         /*用户-停用*/
        function member_stop(obj,id){
            layer.confirm('确认要停售吗？',function(index){
                //发异步把用户状态进行更改
                $(obj).parents("tr").find(".td-status").html('<span class="layui-btn layui-btn-disabled layui-btn-mini">停售</span>');
                $(obj).remove();
                $.ajax({
                    url:"/htgoodslist?v=changeisdefauledown",
                    type:"post",
                    data:{
                        id
                    },
                    success:(r=>{
                        if (r>0){
                            layer.msg('已停售!',{icon: 5,time:1000});
                            window.setTimeout(function () {
                                window.location.reload();
                            },1000)
                        }else {
                            layer.msg('停售出错!',{icon: 5,time:1000});
                        }
                    })
                })

            });
        }

        /*用户-启用*/
        function member_start(obj,id){
            layer.confirm('确认要上架销售吗？',function(index){
                //发异步把用户状态进行更改
                $(obj).parents("tr").find(".td-status").html('<span class="layui-btn layui-btn-normal layui-btn-mini">正常销售</span>');
                $(obj).remove();
                $.ajax({
                    url:"/htgoodslist?v=changeisdefauleup",
                    type:"post",
                    data:{
                        id
                    },
                    success:(r=>{
                        if (r>0){
                            layer.msg('已上架!',{icon: 6,time:1000});
                            window.setTimeout(function () {
                                window.location.reload();
                            },1000)
                        }else {
                            layer.msg('上架失败!',{icon: 5,time:1000});
                        }
                    })
                })

            });
        }
        // 用户-编辑

        /*密码-修改*/
        function member_password(title,url,id,w,h){
           x_admin_show(title,url,w,h);
        }
        /*用户-删除*/
        function member_del(obj,id){
            layer.confirm('确认要删除吗？',function(index){
                //发异步删除数据
                $.ajax({
                    url:"/htgoodslist?v=delgoods",
                    type:"post",
                    data:{
                        id
                    },
                    success:function (r){
                        if (r>0){
                            layer.msg('删除成功!',{icon:1,time:1000});
                            $(obj).parents("tr").remove();
                        }else {
                            layer.msg('删除失败! 请先删除当前商品的商品详情！',{icon:1,time:1000});
                        }
                    }
                })
            });
        }

        //查看详情
        function member_edit (title,url,id,w,h) {
            x_admin_show(title,url,w,h);
        }

        function shuaxin(){
            window.location.reload();
        }
        //分页功能
    </script>

</body>
</html>